<template>
  <div class="container">
    <div class="header">
      <img :src="menuInfo.menuImg" class="img" />
      <div class="right">
        <div class="name">{{ menuInfo.menuName }}</div>
        <div class="btn-list">
          <button class="btn" @click="operate('playAll')">
            <n-icon class="icon">
              <CaretRightFilled />
            </n-icon>
            播放全部
          </button>
          <button class="btn" v-if="menuInfo.isNative" @click="operate('edit')">
            <n-icon class="icon">
              <EditTwotone />
            </n-icon>
            编辑
          </button>
          <button class="btn" v-if="menuInfo.isNative" @click="operate('importMenu')">
            <n-icon class="icon">
              <DownloadOutlined />
            </n-icon>
            导入
          </button>
          <button class="btn" v-if="!menuInfo.isNative" @click="operate('collection')">
            <n-icon class="icon">
              <StarOutlined />
            </n-icon>
            收藏
          </button>
          <button class="btn" v-if="!menuInfo.isNative" @click="operate('openLink')">
            <n-icon class="icon">
              <LinkOutlined />
            </n-icon>
            链接
          </button>
        </div>
      </div>
    </div>
    <div class="input-box">
      <img src="/title/search.png" style="width: 20px; height: 20px" />
      <input type="text" v-model.trim="keyword" class="input" placeholder="筛选" @keydown.enter="filterListFn" />
    </div>
    <div class="list">
      <SongItem
        v-for="(song, i) in filterList"
        :key="i"
        :songInfo="song"
        :deleteInfo="menuInfo.isNative ? { canDelete: true, index: i } : { canDelete: false }"
      />
    </div>
  </div>
  <OperateMenu :menuInfo="editMenuInfo" ref="editSongMenuDom" />
</template>

<script setup>
import { reactive, provide, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import { CaretRightFilled, EditTwotone, DownloadOutlined, StarOutlined, LinkOutlined } from '@vicons/antd';
import { getSongList, setSongList, getMenuImg } from '@/utils/songMenu.js';
import defaultImg from '../../build/icon.png';

const router = useRoute();
const instance = getCurrentInstance();
const playerIsShow = instance.appContext.config.globalProperties.$playerIsShow;
const playSong = instance.appContext.config.globalProperties.$playSong;

const filterList = ref([]);
const menuInfo = reactive({
  platform: '',
  isNative: true,
  menuImg: defaultImg,
  menuName: '',
  songList: [],
});

watch(
  () => router.query.menuName,
  (newName) => {
    menuInfo.menuName = router.query.menuName;
    if (!menuInfo.menuName) return;
    menuInfo.isNative = true;
    menuInfo.menuImg = getMenuImg(menuInfo.menuName) || defaultImg;
    menuInfo.songList = getSongList(menuInfo.menuName) || [];
    filterList.value = menuInfo.songList;
  },
  { immediate: true }
);

const keyword = ref('');

function deleteSong(i) {
  menuInfo.songList.splice(i, 1);
  setSongList(menuInfo.menuName, menuInfo.songList);
}
provide('deleteSong', deleteSong);

// 搜索歌单
watch(
  () => router.query.sid,
  async (newSid) => {
    const sid = router.query.sid;
    if (!sid) return;
    menuInfo.isNative = false;
    const res = await window.BiliAPI.getMenuInfo({
      sid,
      pn: 1,
      ps: 20,
    });
    menuInfo.platform = 'bili';
    menuInfo.menuId = res.menuId;
    menuInfo.menuName = res.title;
    menuInfo.menuImg = res.cover || defaultImg;
    menuInfo.songList = res.songListInfo.data.map((song) => {
      return { platform: 'bili', pic: song.cover, link: `https://www.bilibili.com/audio/au${song.statistic.sid}`, ...song };
    });
    filterList.value = menuInfo.songList;
  },
  { immediate: true }
);

const editSongMenuDom = ref(null);
const editMenuInfo = reactive({
  type: 'edit',
  editInfo: {},
});
function operate(operation) {
  switch (operation) {
    case 'playAll':
      const reverseSongList = JSON.parse(JSON.stringify(menuInfo.songList));
      reverseSongList.reverse();
      reverseSongList.forEach((item) => {
        localStorage.addSong(item);
      });
      playerIsShow(true);
      playSong && playSong(0);
      break;
    case 'edit':
      editMenuInfo.editInfo = {
        menuName: menuInfo.menuName,
        menuImg: menuInfo.menuImg,
      };
      editSongMenuDom.value.operateInfo.isShow = true;
      break;
    case 'importMenu':
      break;
    case 'collection':
      break;
    case 'openLink':
      let url = '';
      if (menuInfo.platform === 'bili') url = `https://www.bilibili.com/audio/am${menuInfo.menuId}`;
      url && window.Operation.openLink(url);
      break;
  }
}

function updateMenuInfo({ newMeunName, newMeunImg }) {
  menuInfo.menuName = newMeunName;
  menuInfo.menuImg = newMeunImg || defaultImg;
}
provide('updateMenuInfo', updateMenuInfo);

function filterListFn() {
  if (keyword.value) {
    filterList.value = menuInfo.songList.filter((item) => {
      if (item.title.includes(keyword.value)) return item;
    });
  } else {
    filterList.value = menuInfo.songList;
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10px 8px 0;
  .header {
    display: flex;
    .img {
      width: 170px;
      height: 170px;
      margin-right: 50px;
      border-radius: 10px;
      object-fit: cover;
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 38px;
        font-weight: 700;
      }
      .btn-list {
        display: flex;
        .btn {
          display: flex;
          align-items: center;
          width: 90px;
          height: 40px;
          margin-right: 30px;
          border: none;
          border-radius: 5px;
          background-color: #f5f5f7;
          color: #000000;
          font-size: 16px;
          &:nth-child(1) {
            width: 140px;
            background-color: #f0f7ff;
            color: #017afe;
          }
          .icon {
            margin: 0 10px;
            font-size: 20px;
          }
        }
      }
    }
  }
  .input-box {
    display: flex;
    align-items: center;
    float: right;
    margin: 25px 0 15px;
    border-radius: 10px;
    padding: 5px;
    background-color: #f5f5f5;
    .input {
      width: 200px;
      height: 30px;
      padding-left: 10px;
      border: none;
      border-radius: 5px;
      background-color: #f5f5f5;
      &:focus-visible {
        outline: none;
      }
    }
  }

  .list {
    height: calc(100vh - 330px);
    overflow: auto;
    margin-top: 100px;
    padding-bottom: 200px;
  }
}

@media screen and (max-width: 1000px) {
  .container {
    .header {
      .img {
        width: 100px;
        height: 100px;
      }
      .right {
        .name {
          font-size: 30px;
        }
      }
    }
    .list {
      height: calc(100vh - 250px);
    }
  }
}
</style>
